<template>
  <el-dialog class="cameraDialog" title="巡塘记录" :visible.sync="dialogVisible" width="40%" :before-close="closeDialog">
    <div class="content">
      <div class="form flex">
        <div class="form-item flex">
          <div class="title">拍照时间：</div>
          <div>{{ cameraInfo.time }}</div>
        </div>
        <div class="form-item flex">
          <div class="title">巡查人：</div>
          <el-select filterable clearable v-model="staffObj" value-key="staffName" filterable clearable>
            <el-option v-for="(item, index) in staffList" :key="index" :label="item.staffName" :value="item"></el-option>
          </el-select>
        </div>
      </div>
      <div class="imageContent">
        <img v-if="cameraInfo.base" :src="'data:image/png;base64,' + cameraInfo.base">
        <span v-else>暂无图片</span>
      </div>
      <div v-show="!cameraInfo.isNormal" class="condition">
        <div class="textareaTitle">异常描述：</div>
        <div class="textarea">
          <el-input type="textarea" v-model="remark"></el-input>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="add()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>

import StaffApi from "@/api/basic-info-manage/staff";
import inspectionElectronicPatrolApi from "@/api/inspection-management/inspection-electronicPatrol"
import demoApi from "@/api/document";
export default {
  props: {
    show: {
      type: Boolean,
      debugger: false
    },
    cameraInfo: {
      type: Object,
      default: () => ({
        time: '',
        imgSrc: '',
        base: '',
        isNormal: false
      })
    }
  },
  watch: {
    show (v) {
      this.dialogVisible = v
      this.remark = ''
    },
  },
  data () {
    return {
      staffObj: {},
      dialogVisible: false,
      remark: '',
      params: {
        inspectionTime: '',   //巡检时间
        remark: '',   //巡检说明
        pictureIdList: [],   //图片Id列表
        staffId: '',   //巡检人员Id
        staffName: '',  //巡检人员名称
        whetherNormal: true,   //是否正常
      },
      staffList: []
    }
  },
  mounted () {
    console.log(inspectionElectronicPatrolApi, '巡塘接口')
    this.queryStaff()
  },
  methods: {
    base64ToBlobios (base64Str) {
      let byteCharacters = atob(base64Str);
      let byteNumbers = new ArrayBuffer(byteCharacters.length);
      let byteArray = new Uint8Array(byteNumbers);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteArray[i] = byteCharacters.charCodeAt(i);
      }
      let blob = new Blob([byteNumbers], { type: "image/jpeg" });
      let formData = new FormData();
      formData.append("file", blob, new Date().getTime() + ".png");
      return formData;
    },
    closeDialog () {
      this.$emit("closeDialog");
    },
    //获取员工
    queryStaff () {
      StaffApi.queryByCondition().then(res => {
        this.staffList = res.data;
      })
    },
    //使⽤ 
    async add () {
      if (this.cameraInfo.isNormal && !this.staffObj.staffId) {
        this.$message('请选择巡塘人');
        console.log('正常')
        return
      } else if (!this.cameraInfo.isNormal && (!this.staffObj.staffId || !this.remark)) {
        this.$message('请选择巡塘人并输入异常原因');
        console.log('异常')
        return
      }
      let params = { ...this.params }
      params.inspectionTime = this.cameraInfo.time;
      params.staffId = this.staffObj.staffId;
      params.staffName = this.staffObj.staffName;
      params.whetherNormal = this.cameraInfo.isNormal + '';
      params.remark = !this.cameraInfo.isNormal ? this.remark : ''
      console.log(this.base64ToBlobios(this.cameraInfo.base))
      demoApi.fileUpload(this.base64ToBlobios(this.cameraInfo.base)).then(res => {
        if (res.success) {
          params.pictureIdList = [res.data];
          console.log('图片id', res.data)
        } else {
          this.$message.error(res.message)
        };
        inspectionElectronicPatrolApi.add(params).then(res => {
          if (res.success) {
            this.$message.success(res.message || "添加成功！");
            this.closeDialog()
          } else {
            this.$message.error(res.message || "添加失败！");
          }
        })
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cameraDialog {
  .content {
    height: 100%;
    width: 100%;

    .form {
      justify-content: space-between;
      padding-bottom: 10px;

      .form-item {
        margin-right: 15px;
      }
    }



    .imageContent {
      width: 100%;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #cecece;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .condition {
      .textareaTitle {
        line-height: 36px;
        padding-top: 20px;
      }
    }
  }
}
</style>
